| 开始使用React Native和Expo SDK | 您所在的位置：网站首页 › splash screen react › 开始使用React Native和Expo SDK |
开始使用React Native和Expo SDK
|
Expo是一个开源平台，它使开发跨平台的iOS和Android移动应用程序比以前容易得多。Expo SDK是一系列针对每个iOS和Android平台的原生库，它允许JavaScript访问设备的系统功能，如摄像头、推送通知、本地存储、联系人以及其他硬件和操作系统API。 先决条件要安装Expo，你的机器需要Node.js的12版或更新版本，因为Expo的命令行工具和依赖性管理依赖于Node平台。你可以通过在终端运行Node -v命令来检查你的Node版本。 Expo提供了一个名为Expo CLI的命令行界面。它被用来在iOS或Android中开发应用时进行测试。 npm install -g expo-cli 为iOS和Android安装Expo移动客户端为了测试你的移动应用的功能，你需要为安卓和苹果手机安装Expo客户端应用。你可以在Google Play商店和App Store中找到它们。 构建一个世博应用程序让我们建立一个世博会的应用程序，看看它是如何工作的。你可以用以下命令创建一个新的世博应用。 expo init your_app_name用你希望建立的应用程序的名称替换your_app_name 。一旦你点击回车，你会被提示为你的应用程序选择模板类型。 你可以选择任何适用于你的应用程序的模板。现在，我将选择 "空白工作流"以使事情变得简单。 接下来，你会被提示通过Yarn安装模板。如果你已经安装了Yarn，请选择是，否则请选择继续。一旦你遵循接下来的步骤，你的应用程序就可以使用了。 跳到下面的命令来启动项目。 cd npm start or yarn start成功执行上述命令后，它将启动一个新的开发地铁环境。你将得到二维码，应该通过安卓的Expo的客户端应用和iPhone的默认相机应用进行扫描。现在，你就可以开始了。 在Expo和React Native中设置项目我们的项目由几个重要的文件组成：App.json 有所有的应用配置，如应用名称、SDK版本、图标等。应用程序的依赖性在package.json 文件中列出。然后是App.js ，它在应用程序被启动时运行。在那里，你会看到render 方法，它在返回语句中把所有的组件包在一个单一的组件里面。 你可以使用App.js 文件底部的styles 对象来指定你的UI组件的样式。将styles 从render 方法中移出，将增强React Native中代码的可读性。 下面是App.js 中的示例代码。 import React from 'react'; import { StyleSheet, View, Text } from 'react-native'; export default class Main extends React.Component { //render method returning RN components render() { return ( My First App ); } } //code your styles here const styles = StyleSheet.create({ title: { //Your styles here }, title_txt: { //Your styles here } }); 什么是Expo SDK？Expo带有几个内置的库，这些库在大多数应用程序中经常出现。关于这方面的更多细节，请参考Expo文档。然而，以下库在你构建的大多数应用程序中都会有用。 [AppAuth](https://docs.expo.io/versions/v34.0.0/sdk/app-auth/), [AuthSession](https://docs.expo.io/versions/v34.0.0/sdk/auth-session/)：通过OAuth对用户进行认证 [SplashScreen](https://docs.expo.io/versions/v34.0.0/sdk/splash-screen/)：在启动应用程序时制作一个闪屏 [localization](https://docs.expo.io/versions/v34.0.0/sdk/localization/)管理你的应用程序的l10n/i18n，以达到本地化的目的 [AppLoading](https://docs.expo.io/versions/v34.0.0/sdk/app-loading/)：加载资产、字体等。 [MapView](https://docs.expo.io/versions/v34.0.0/sdk/map-view/)：在应用程序中使用地图 [ImagePicker](https://docs.expo.io/versions/v34.0.0/sdk/imagepicker/)/[ImageManipulator](https://docs.expo.io/versions/v34.0.0/sdk/imagemanipulator/)：从设备上打开图像或视频 [Sharing](https://docs.expo.io/versions/v34.0.0/sdk/sharing/)：在应用程序和设备之间共享数据 [SecureStore](https://docs.expo.io/versions/v34.0.0/sdk/securestore/): 在设备存储器上保存数据 [Camera](https://docs.expo.io/versions/v34.0.0/sdk/camera/): 使用设备的摄像头拍摄照片和视频以下是Expo支持的一些额外功能。 通知：来自Expo推送服务的推送通知 [Admob](https://docs.expo.io/versions/v34.0.0/sdk/admob/):谷歌用于AdMob的SDK [FacebookAds](https://docs.expo.io/versions/v34.0.0/sdk/facebook-ads/):Facebook的SDK [Branch](https://docs.expo.io/versions/v34.0.0/sdk/branch/): 使用 branch.io 进行整合 [Amplitude](https://docs.expo.io/versions/v34.0.0/sdk/amplitude/):用于移动应用程序的Amplitude分析此外，你还可以访问。 [Audio](https://docs.expo.io/versions/v34.0.0/sdk/audio/): 播放或记录声音 [AV](https://docs.expo.io/versions/v34.0.0/sdk/av/): 播放音频/视频 [ART](https://docs.expo.io/versions/v34.0.0/sdk/art/): 使用SVG绘制东西 [Brightness](https://docs.expo.io/versions/v34.0.0/sdk/brightness/): 管理亮度 [BackgroundFetch](https://docs.expo.io/versions/v34.0.0/sdk/background-fetch/)运行后台任务 [Payments](https://docs.expo.io/versions/v34.0.0/sdk/payments/)支持通过Stripe使用Apple Pay和Android Pay进行支付整合一般来说，一旦你通过Yarn、npm或Expo安装了它，有大约80个API可以访问，而不需要关闭metro bundler，这只是另一种加快进度的方式。 使用Expo创建一个闪屏让我们通过添加一个闪屏来学习Expo的工作方式。首先，创建一个.png格式的图片，这适合于你的应用程序中的闪屏。然后，将该图片放在你的应用程序目录中。在这里，我已经把它添加到了目录的根部。 现在，使用以下命令将expo-splash-screen 库安装到应用程序中。 expo install expo-splash-screen接下来，创建一个新文件并导入上述库。之后，创建一个函数来显示闪屏，像这样。 import React, { useCallback, useEffect, useState } from 'react'; import { StyleSheet, Text, View } from 'react-native'; //import splash screen library here import * as SplashScreen from 'expo-splash-screen'; //import your image from the directory import splashScreenImage from './splashScreenImage.png' export default function SplashScreen() { const [loaded, setLoaded] = useState(false); useEffect(() => { async function prepare() { try { // Keep our splash screen awake while the app fetches the resources await SplashScreen.preventAutoHideAsync(); // Pre-load any content here // Also you can make any API calls here // Delay loading for one second await new Promise(resolve => setTimeout(resolve, 1000)); } catch (e) { console.warn(e); } finally { // Tell the app that our resources are finished loading setLoaded(true); } } prepare(); }, []); const onLayoutRootView = useCallback(async () => { if (loaded) { // Now, let's inform our splash screen to disappear as our resources are loaded now. await SplashScreen.hideAsync(); } }, [loaded]); if (!loaded) { return null; } return ( // Make your view in Splash Screen here. ); }最后，从你的App.js 中导入文件并在那里调用我们的SplashScreen 函数。 import React from 'react'; import { StyleSheet, View, Text } from 'react-native'; //import our component here import SplashScreen from './SplashScreen.js'; export default class Main extends React.Component { render() { return ( //place our component here. My First App ); } }启动你的应用程序，看看世博会的客户端应用程序的结果吧! 当需要将应用发布到商店时，你会被提供一些选项来选择。 #Build command expo build:[ios|android]这个命令将开始在云端而不是本地安装软件包，不需要高性能的笔记本电脑或PC。如果你是一个Windows用户也可以，因为你从来没有使用过Xcode。只需等待构建完成，你就可以完成了。 在构建排队后，你可以毫不犹豫地从终端退出。如果您需要了解构建的状态，请浏览 "您可以在 "文本下面的URL，以监控构建。 在那里，你会发现一个下载按钮，一旦构建完成就可以使用。在此期间，你可以在终端中等待，以获得直接连接下载软件包。 现在，我们如何把它上传到商店？使用Expo最简单的方法是使用以下命令。 expo upload:[ios|android]很好!你都准备好了! 2021年世博会增加的新功能2021年世博会增加了多项新功能。以下是一些最受欢迎的功能。 集成的开发者工具通过CLI，你可以访问开发者菜单，检查组件，并跟踪结果。只需运行Expo start并点击m来访问开发者菜单，shift+m 来访问性能监视器或本地应用程序中的元素检查器。 强制重载每隔几分钟就摇动一次机器，这可能是很难做到的！但这并不妨碍你的工作。通过在终端UI中按r，你可以重新加载连接的计算机、笔记本电脑、模拟器和浏览器。这种方法与iOS、Android、网络和所有物理设备兼容。 TypeScript的自动设置因为安装TypeScript可能很麻烦，所以他们让它完全自动。只需生成一个空白的tsconfig.json 文件并执行Expo的启动命令，剩下的就由Expo来处理。你可以在Expo文档的 "TypeScript "中找到更多的细节。 明显改善的错误没有人喜欢bug。所以他们在SDK 41中对错误进行了改进，使其具有描述性、有用性和实用性。只有最重要的堆栈痕迹被显示出来，并且错误和警告被精确地指出。源代码图也得到了更新，而且生成的代码痕迹也被屏蔽了。 调试你的配置现在你可以看到app.config.js 或app.json的评估结果，使用最新的Expo配置顺序。使用expo config --type public 命令可以看到世博发布中使用的应用程序清单文件。 改进了苹果商店的互动和通过终端连接的能力Expo CLI提供的连接可以快速解决问题，而其他工具则显示为401。如果你需要改变支付方式或签署合同，你只需解决几个点击，就可以重新开始开发。 总的来说，Expo现在速度更快，提供智能认证，改进错误管理，并直接从控制台完全洞察动态问题。 Expo的局限性虽然有很多令人印象深刻的新功能，但你也应该注意到Expo的一些局限性。 Expo应用程序不支持后台代码执行。这意味着你不能在应用关闭时执行监听位置变化的代码。 世博应用程序被限制在世博SDK支持的本地API中。这意味着，如果应用程序需要一个独特的用例，唯一的方法是使用基本的React Native代码或使用ExpoKit库来开发。 Expo将你绑定在他们的工具集上。这意味着你将无法使用任何其他的React Native开发工具，包括命令行工具和UI框架，只需安装它们。然而，好消息是，Expo SDK符合基本的React Native应用程序，所以从Expo弹出你的应用程序不会是一个挑战。 Expo应用程序中的独立二进制文件只有在在线时才能构建。Expo提供的命令行工具允许开发者在Expo服务器上启动其应用程序的构建过程。一旦完成，你将得到一个URL，以访问可下载的.apk或.ipa文件。尽管有上述限制，Expo还是很有价值的，因为它是一个完全运作的平台，广泛支持著名的Android和iOS API。这意味着它涵盖了应用程序通常所需的大部分功能。因此，没有必要在Expo之外寻找执行本地功能。 总结React Native是开发原生移动应用程序的最流行的框架。Expo通过其SDK和开发者工具进一步简化了这个过程。如果你是一个React Native开发者，你应该一直关注Expo，了解它的优势和局限性。 在这篇博文中，我们用Expo创建并发布了一个应用，当然你也可以通过添加更多的功能来扩展这个应用。总的来说，Expo SDK是一个伟大的库集合，几乎涵盖了你在移动应用中想要的所有功能。谢谢你的阅读。 The postGetting started with React Native and Expo SDKappeared first onLogRocket Blog. |
【本文地址】
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |